<template>
    <h2>ref创建基本类型</h2>
    <div class="person">
      <h2>name:{{ name }}</h2>
      <h2>age:{{ age }}</h2>
      <button @click="showTel" >联系方式</button>
      <button @click="changeAge" >改年龄</button>
    </div>
  
</template>


<script lang="ts" setup name="lesson6 vue">

    import {ref} from 'vue'//通过ref来实现响应式数据

    //数据，原来是写在data中的，
    let name= ref("zhangsan") 
    let age = ref(19) 
    let tel = '13900000002'

    console.log(1, name)
    console.log(2, age)
    console.log(3, tel)

    function showTel(){
        alert(tel)
    }
    function changeAge(){
        console.log("---changeAge---")
        age.value+=1
    }
</script>
<style scoped>
  .person{
      background-color: skyblue;
      border-radius: 3px;
      padding: 5px;
      margin: 2px 5px 2px 5px;
  }
</style>